<template>
    <div class="left_down">
        <div class="group1 group">
            <div class="DataShowSection" :style="{ color: cpuColor }">
                <div class="DataSection">{{ data.cpuUtilization }}</div>
                <div class="unit">%</div>
                <!-- <arrows class="arrows" :isHigh="isCpuHigh"></arrows> -->
                 <arrows2 class="arrows" :isHigh="isCpuHigh"></arrows2>
                <div class="content">CPU利用率</div>
            </div>
            <div class="DataShowSection" :style="{ color: memoryColor }">
                <div class="DataSection">{{ data.memoryUtilization }}</div>
                <div class="unit">%</div>
                <!-- <arrows class="arrows" :isHigh="isMemoryHigh"></arrows> -->
                <arrows2 class="arrows" :isHigh="isMemoryHigh"></arrows2>
                <div class="content">内存利用率</div>
            </div>
        </div>
        <!-- 分流数据没有颜色和箭头动画变化 -->
        <!-- <div class="group2 group">
            <div class="DataShowSection" :style="{ color: LOW_COLOR }">
                <div class="DataSection">{{ data.diversionAmountBits }}</div>
                <div class="unit">kb</div>
                <arrows class="arrows" :isHigh="isDiversionAmountHigh"></arrows> -->
                <!-- <div class="content">分流数据量</div>
            </div>

            <div class="DataShowSection" :style="{ color: LOW_COLOR }">
                <div class="DataSection">{{ data.diversionPercentage }}</div>
                <div class="unit">%</div>
                <arrows class="arrows" :isHigh="isDiversionHigh"></arrows> -->
                <!-- <div class="content">分流百分比</div>
            </div>
        </div> -->
        <div class="group3 group">
            <!-- <div class="DataShowSection">
                <div class="DataSection">{{ data.lost }}</div>
                <div class="unit">%</div>
                <arrows class="arrows"></arrows>
                <div class="content">预测准确率</div>
            </div> -->
            <div class="DataShowSection" :style="{ color: congestionColor }">
                <div class="DataSection">{{ data.congestionLevel }}</div>
                <div class="unit">%</div>
                <!-- <arrows class="arrows" :isHigh="isCongestionHigh"></arrows> -->
                 <arrows2 class="arrows" :isHigh="isCongestionHigh"></arrows2>
                <div class="content">拥塞程度</div>
            </div>
        </div>



    </div>

</template>
<script lang='ts' setup>
import arrows from './arrows.vue';
import arrows2 from './arrows2.vue';
import { reactive, ref, watch, computed } from 'vue';
import { useNodeDataStore } from '../store/node_data.ts';
import { storeToRefs } from 'pinia';
import { useChosenNodeStore } from '../store/chosen_node.ts';
import { fa } from 'element-plus/es/locale/index.mjs';
let usenodes = useNodeDataStore();
let { nodes } = storeToRefs(usenodes);
let chosen_node = useChosenNodeStore();

//如果chosen_node.index == -1,则显示默认值0
let data = reactive({
    cpuUtilization: chosen_node.index === -1 ? 0 : nodes.value[chosen_node.index].cpuUtilization,
    congestionLevel: chosen_node.index === -1 ? 0 : nodes.value[chosen_node.index].congestionLevel,
    memoryUtilization: chosen_node.index === -1 ? 0 : nodes.value[chosen_node.index].memoryUtilization,
    // diversionPercentage: chosen_node.index === -1 ? 0 : nodes.value[chosen_node.index].diversionPercentage,
    // diversionAmountBits: chosen_node.index === -1 ? 0 : nodes.value[chosen_node.index].diversionAmountBits,
});
let isCpuHigh = computed(() => data.cpuUtilization > 50);
let isMemoryHigh = computed(() => data.memoryUtilization > 50);
let isCongestionHigh = computed(() => data.congestionLevel > 50);
watch(() => chosen_node.index, (value) => {
    // console.log("value", value);
    data.cpuUtilization = nodes.value[value].cpuUtilization;
    data.congestionLevel = nodes.value[value].congestionLevel;
    data.memoryUtilization = nodes.value[value].memoryUtilization;
    // data.diversionPercentage = nodes.value[value].diversionPercentage;
    // data.diversionAmountBits = nodes.value[value].diversionAmountBits;
    // data.lost = 5;
    // console.log("data", data);
})
// 定义两个颜色常量
const HIGH_COLOR = 'rgb(255, 69, 0)';
const LOW_COLOR = 'rgb(0, 255, 140)';

const cpuColor = computed(() => data.cpuUtilization > 50 ? HIGH_COLOR : LOW_COLOR);
const memoryColor = computed(() => data.memoryUtilization > 50 ? HIGH_COLOR : LOW_COLOR);
const congestionColor = computed(() => data.congestionLevel > 50 ? HIGH_COLOR : LOW_COLOR);
// const diversionColor = computed(() => data.diversionPercentage > 50 ? HIGH_COLOR : LOW_COLOR);
// const diversionAmountColor = computed(() => data.diversionAmountBits > 1000 ? HIGH_COLOR : LOW_COLOR);


// const isDiversionHigh = computed(() => data.diversionPercentage > 50);
// const isDiversionAmountHigh = computed(() => data.diversionAmountBits > 1000);


</script>
<style scoped>
@font-face {
    font-family: 'DS-Digital';
    src: url(/DS-DIGI-1.ttf);
}

.left_down {
    top: 2.5%;
    left: 2.5%;
    width: 95%;
    height: 95%;
    position: relative;
    /* background-color: aliceblue; */
}

.group {
    width: 100%;
    height: 40%;
    display: flex;
    /* background-color: blue; */
    /* margin-top: 2.5%; */
    padding-top: 5%;
}

.group3 {
    /* 居中 */
    justify-content: space-around;

}

.DataShowSection {
    width: 45%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 3%;
    /* background-color: rgb(255, 0, 0); */
    /* 文字和箭头颜色 */
    color: rgb(0, 255, 140);
}

.DataSection {
    position: relative;
    left: 5%;
    width: 45%;
    height: 80%;
    font-size: 350%;
    font-family: "DS-Digital";


    display: flex;
    /* 使用flexbox布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    text-align: center;

}

.unit {
    position: relative;
    top: 20%;
    width: 10%;
    height: 60%;
    display: flex;
    font-size: 100%;
    color: rgb(131, 131, 131);
    /* 使用flexbox布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
}

.content {
    position: relative;
    bottom: 10%;
    width: 100%;
    height: 10%;
    display: flex;
    color: rgb(172, 172, 172);
    /* 使用flexbox布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    font-size: 100%;
    font-family: "Microsoft YaHei";
}
</style>
